Responsive header refactor - #14

…tion - Part 2 - Working as expected

…tion - Part 3 - Adding indicator to expanding nav sub menu items

…tion - Part 4 - Lock indicator to details summary when toggling

# Please enter a commit message to explain why this merge is necessary,
# especially if it merges an updated upstream into a topic branch.
#
# Lines starting with '#' will be ignored, and an empty message aborts
# the commit.

… and document pointer-events requirement

Merges the duplicate .overflow-sub-nav-indicator-hovered rules into one.
Adds a comment explaining why pointer-events: none is critical — without it
the indicator (z-index: 1) swallows mouse events, clears hoveredChildKey, and
causes a flicker loop on hover.

…dden width feedback loop

- Move all component styling from default.vue into ResponsiveHeader.vue and
  NavigationItems.vue via CSS custom property token system
- Token defaults live at var(--token, fallback) at usage sites — NOT declared on
  the component root element, avoiding source-order cascade conflicts with consumers
- Add public token comment blocks documenting all available override tokens
- Rename consumer scope class from 'your-scope-class' to 'site-header-nav'
- default.vue now contains only page layout CSS plus a clean .site-header-nav
  token-override block (~360 lines removed)
- Add color/active-indicator tokens: --responsive-nav-decorator-indicator-color,
  --overflow-nav-decorator-indicator-color, --responsive-header-color
- Fix visually-hidden item width feedback loop (7995px runaway):
  - Root cause: overflow: hidden sets flex min-width to 0 but does not cap
    max-width; each hide→measure cycle read the inflated (content + margin) width
  - Fix 1: inline-size default changed from auto to 100% so the wrapper is
    properly constrained within its grid column
  - Fix 2: inline-size: var(--_main-navigation-item-width) added to .visually-hidden
    state, pinning the <li> to its originally-measured width so offsetWidth always
    returns the correct value regardless of shifted inner content

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Add --responsive-nav-decorator-hovered-indicator-color token (main nav)
- Add --overflow-nav-decorator-hovered-indicator-color token (overflow nav)
- Use CSS :has(li.is-hovered) to switch the active indicator bar to the hover
  colour when the bar has tracked to a hovered item, keeping active and hover
  visually distinct
- Update .overflow-sub-nav-indicator-hovered border to use hover indicator token
- default.vue: active indicator = white (--slate-00), hover indicator = green (--green-08)
- Tokens fall back gracefully — consumers only need to set the indicator color
  if they want hover and active to share the same colour

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Replace invalid native CSS &__child concatenation with explicit descendant
selectors across three demo pages (esbuild was silently converting them to
:is(__child) which matched nothing):

- scroll-reveal-image.vue: &__info → & .sri-demo-row__info,
  &__heading / &__fields → & .demo-controls__heading/fields
- site-navigation-demo.vue: &--wide, &__text, &__img, &__body all
  lifted to top-level rules; media query hoisted out of modifier block
- page-hero-highlights.vue: &__heading, &__toggles, &__selects
  replaced with explicit .demo-controls__* selectors

Other changes:
- simple-grid.vue: replace GridCore with LayoutGridByWidth
- Add .claude/skills/css-nesting-conventions.md — documents the
  &__child pitfall, why it silently fails, and correct patterns
- Add .claude/skills/pull-request-description.md skill
- CLAUDE.md: add pitfall #11 (Sass-style BEM nesting in native CSS)